<template>
  <div>
    <div class="user-info ">
        <div class="info">
          <div class="header-avatar flex-a-c flex-j-c">
            <img :src="details.pic" />
          </div>
          <div class="info-tag flex-a-c">
            <h3>{{details.name}}</h3>
              <block v-if="details.label && details.label.length > 0" class="flex-a-c">
                <div v-for="(item,index) in details.label" :key="index" class="tag">{{item}}</div>
              </block>
          </div>
          <p class="user-desc">
            {{details.introduce}}
          </p>
        </div>
    </div>
    <!--主讲课程-->
    <div class="course-content">
      <h3>主讲课程</h3>
      <div class="course-list" :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
        <block v-for="(item,index) in courseList" :key="index">
          <course-item :datas="item" :courseType="3">
            <template v-slot:imgTag>
              <div class="img-tag" >{{item.chapter_count}}章{{item.section_count}}节</div>
            </template>
          </course-item>
        </block>
      </div>
    </div>
  </div>
</template>
<script>
import lecturer_controller from "./lecturer_controller.js";
export default lecturer_controller;
</script>
<style  scoped>
  .course-list {
    padding-left: 0.5rem;
  }

  .course-list ::v-deep .courseItem {
    padding: 0.625rem 0.625rem 0.375rem 0.625rem;
  }
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.user-info {
  margin: 0 0 1rem 0;
  padding: 2.5rem 0 0 0;
  background-image: linear-gradient(to bottom, var(--themeBaseColor) 80%, #f5f5f5 20%);
  background-repeat: no-repeat;
  background-position: center center;
  // padding: 0  0 0.625rem 0;
  .info {
    background: #fff;
    border-radius: 0.9375rem;
    padding: 2.5rem 1.25rem 0.625rem 1.25rem;
    box-sizing: border-box;
    position: relative;

    .header-avatar {
      width: 3.125rem;
      height: 3.125rem;
      border-radius: 50%;
      background-color: #fff;
      border: 0.125rem solid #fff;
      position: absolute;
      //calc(-50% - 0.125rem);
      top: -1.25rem;
      // transform: translateY(50%);
      z-index: 10;

      img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        display: inline;
      }
    }

    .info-tag {
      flex-wrap: wrap;
      // padding:2.5rem 0 0 0;
      h3 {
        font-weight: 800;
        color: #242424;
        line-height: 1.4375rem;
        padding: 0 1.125rem 0 0;
      }

      .tag {
        min-width: 3.4375rem;
        box-sizing: border-box;
        margin-right: 0.75rem;
        font-size: 0.625rem;
        line-height: 0.625rem;
        font-weight: 500;
        color: #fffae7;
        border-radius: 0.5625rem;
        padding: 0.25rem 0.5rem;
        background: linear-gradient(104deg, #bf863c 0%, #e0b070 100%);
      }
    }

    .user-desc {
      padding: 0.625rem 0 0 0;
      font-size: 0.6875rem;
      font-weight: 500;
      color: #727272;
      line-height: 0.9375rem;
      text-align: left;
    }
  }
}

.course-content {
  border-radius: 0.9375rem;
  background-color: #fff;
  padding: 0.9375rem 0 0.625rem 0;

  h3 {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0d0d0d;
    text-align: left;
    padding: 0 0 0.5rem 1.125rem;
  }
}

.img-tag {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 500;
  color: #fff;
  padding: 0.25rem 0.375rem;
  background: rgba(25, 25, 25, 0.5);
  border-radius: 0.375rem;
}
</style>